<template>
  <div
    class="editor-canvas-area"
    :style="cpStyle"
    @mousedown.stop="clearActivity"
    @dragover.prevent
    @dragleave.prevent
    @dragenter.prevent
    @drop="drop"
  >
    <div
      v-for="(cpt, index) in componentsList"
      :key="cpt.id"
      :class="`cp cp__${cpt.id}`"
      :style="{
        width: `${cpt.size.width}px`,
        height: `${cpt.size.height}px`,
        transform: `translateX(${cpt.position.left}px) translateY(${cpt.position.top}px)`,
        zIndex: index + 1,
      }"
      @mousedown.stop="dragStart($event, cpt, index)"
    >
      <ComponentTransform :info="cpt" />
    </div>
  </div>
</template>

<script>
import ComponentTransform from './indicators/ComponentTransform.vue';
import dragEventHook from '../hooks/dragEventHook';
import { dropEvent } from '../hooks/dropEventHook';
export default {
  name: 'ComponentsCanvas',
  props: {
    cpStyle: {
      type: String,
    },
  },
  data() {
    return {
      componentsList: {},
    };
  },
  created() {
    console.log('cpStyle', this.cpStyle);
  },
  computed: {
    components() {
      return this.$store.state.imageDragMoudules.components;
    },
  },
  methods: {
    //清除选中
    clearActivity() {
      console.log('mounseDown');
      this.$store.commit('setActivated', { type: 'background', component: {} });
    },
    dragStart(event, cpt, index) {
      console.log('dragStart');
      dragEventHook(event, index);
    },
    drop(event) {
      console.log('drop');
      dropEvent(event);
      // drop_fn();
    },
  },
  watch: {
    components: {
      handler(newVal, oldVal) {
        console.log('components:', newVal);
        this.componentsList = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  components: {
    ComponentTransform,
  },
};
</script>

<style lang="scss">
.cp {
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
}
</style>
